const path = require('path')
//导入内存生成页面的插件 同时会把生成的bundle.js 追加到生成到内存的index.html页面底部
const htmlWebpackPlugin = require('html-webpack-plugin')
//引入VueLoaderPlugin 插件
const { VueLoaderPlugin } = require('vue-loader');

//该js文件 通过node中的模块操作 向外暴露了一个配置对象
module.exports = {
    entry : path.join(__dirname, './src/main.js'),
    output : {
        path : path.join(__dirname, './dist'),
        filename : 'bundle.js'
    },
    mode : 'development',
    plugins : [
        new htmlWebpackPlugin({ //创建在内存中生成HTML的插件
            template : path.join(__dirname, './src/index.html'), //指定在内存中生成页面的路径
            filename : 'index.html' //指定在内存中生成页面的名字
        }),
        new VueLoaderPlugin(),

    ],
    module : {//配置所有的第三方模块加载器
        rules : [
            //配置.css文件的第三方规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            //处理图片路径的loader 为了让图片不进行base64处理 我们进行url-loader传参 url-loader?limit=3333&name=[hash:8]-[name].[ext]
            // limit=3333意味着图片大小 大于等于图片大小的时候 图片不会被转为base64字符串 图片大小小于给定的值时 图片就会被转为base64格式
            // name=[hash:8]-[name].[ext]代表使用32位hash值前8位+图片名引用图片
            { test : /\.jpg|png|gif|bmp|jpeg$/, use : 'url-loader?limit=3333&name=[hash]-[name].[ext]' },
            //添加字体文件规则
            { test : /\.ttf|eot|svg|woff|woff2$/, use : 'url-loader'},
            // es6 es7语法降级处理
            { test : /\.js$/, use : 'babel-loader', exclude: [ 
                path.resolve(__dirname, "node_modules") 
            ] },
            //解析 .vue 文件
            { test : /\.vue$/, use : 'vue-loader' }
        ]
    },
    resolve : { //修改导入vue包的路径
        alias : {
            //"vue$" : "vue/dist/vue.js"
        }
    }
}


// 让webpack自动监听代码的改变 自行进行打包编译
// 使用 webpack-dev-server 工具，来实现自动打包编译功能
// npm i webpack-dev-server -D 把这个工具安装到本地开发依赖
// 安装完成后 该工具的用法和webpack的用法完全一样
// 由于webpack-dev-server是本地安装 没有进行全局安装 所以不能直接使用命令执行 所以我们把该工具加入package.json 中的script项下 加入dev中
// 使用该工具 必须本地安装了webpack 就算全局安装也不可以 npm i webpack-cli -D
// 然后执行npm run dev 如果运行报错 就删除node_modules 然后执行 npm i进行重装 然后在执行 npm run dev

// 由于我们访问路径 localhost：8080/根路径 bundle.js实际被webpack-dev-server 打包到了localhost:8080/bundle.js 然后使用dist目录下的bundle.js实际是毫无作用的 修改index.html文件的加载路径

// webpack-dev-server 帮我们打包生成的bundle.js 没有存放到实际的物理磁盘上 该文件存放在电脑的内存中 所以我们在项目的根目录下找不到 但是我们又可以访问 我们可以认为根目录下存在虚拟的bundle.js文件
// 放到内存中的原因 是为了让加载静态资源时 加载速度最快

// 设置服务器启动后 自动打开浏览器 在package.json的 dev的webpack-dev-server 后面加上参数 webpack-dev-server --open --port 3000 接着重启服务器 npm run dev
// 设置为 webpack-dev-server --open --port 3000 --contentBase src 代表 自动打开浏览器 以3000端口访问 默认访问 src目录下的文件
// 设置为 webpack-dev-server --open --port 3000 --contentBase src --hot 代表 自动打开浏览器 以3000端口访问 默认访问 src目录下的文件 
// 加上hot参数 默认不在新生成bundle.js 而是对原来的文件进行 修改操作 还可以减少请求 对静态的资源文件不会进行多次请求 实现对网页不重载就展示

// 使用webpack插件 html-webpack-plugin 将主配置页面加入到内存中去  npm i html-webpack-plugin -D
// 在webpack.config.js中去加入 新安装的html-webpack-plugin插件
// 然后在插件 plugins 配置中加入 路径             template : path.join(__dirname, './src/index.html'), //指定在内存中生成页面的路径 filename : 'index.html' //指定在内存中生成页面的名字
// 使用插件后生成的index.html页面 自动会在底部添加一个引用内存中bundle.js的代码 

// 使用css样式规则 不在html引入 css静态文件样式
// webpack只能打包处理 js 类型文件 无法处理非js类型的文件 
// 如果要处理 非 js 类型的文件， 我们需要安装一些 合适的第三方 loader 加载器
// 1.如果打包处理css文件，需要安装 npm i style-loader css-loader -D 
//   如果打包处理less文件， 需要安装  npm i less less-loader -D
// 2.打开webpack.config.js配置文件，在里面新增一个节点，module对象；该对象还有个
//   有个rules属性，这个属性是个数组，该数组存放第三方文件 匹配和处理规则；
// webpack处理第三方文件类型的过程：1.发现不是js文件 就去找loader规则
//  找到规则后，从后往前处理 先处理css-loader 接着处理 style-loader 然后发现前面没有loader处理后
//  就把文件进行打包合并 最后输出到bundle.js中去


// 处理通过url加载图片或者字体的方式 安装处理url的规则和内部的规则 npm i url-loader file-loader -D
// 然后把匹配规则加到webpack.config.js中的rules中去 { test ： /\.jpg|png|gif|bmp|jpeg$/, use : 'url-loader' } 
// 处理图片路径的loader 为了让图片不进行base64处理 我们进行url-loader传参 url-loader?limit=3333&name=[hash:8]-[name].[ext]
// limit=3333意味着图片大小 大于等于图片大小的时候 图片不会被转为base64字符串 图片大小小于给定的值时 图片就会被转为base64格式
// name=[hash:8]-[name].[ext]代表使用32位hash值前8位+图片名引用图片

// 使用bootstrap的svg图标 npm i bootstrap -S